@import "../base/base.scss";

@import "icons/fontello.scss";
@import "fonts/open-sans.scss";
@import "keyframes.scss";

/* TODO move common mixins to base theme */
@import "mixins.scss";

/* TODO move new loading indicator to base when it's ready */
@import "loading-indicator.scss";

@import "common.scss";

/* TODO move new notification theme to base as the default when they are ready */
@import "components/notification.scss";
@import "components/button.scss";
@import "components/textfield.scss";
@import "components/combobox.scss";
@import "components/tabsheet.scss";
@import "components/label.scss";
@import "components/table.scss";
@import "components/window.scss";
@import "components/panel.scss";
@import "components/optiongroup.scss";

@import "views/schedule.scss";
@import "views/sales.scss";
@import "views/reports.scss";
@import "views/transactions.scss";
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);



@mixin dashboard {
	
	@include base;
	
	@include dashboard-loading-indicator;
	@include dashboard-common;
	
	@include dashboard-button;
	@include dashboard-combobox;
	@include dashboard-label;
	@include dashboard-notification;
	@include dashboard-table;
	@include dashboard-tabsheet;
	@include dashboard-textfield;
	@include dashboard-window;
        @include dashboard-panel;
        @include dashboard-optiongroup;
	
	@include dashboard-schedule-view;
	@include dashboard-sales-view;
	@include dashboard-reports-view;
	@include dashboard-transactions-view;


	.v-view {
		overflow: hidden;
	}
	
	&.v-app {
		background: #353637;
	}
	
	&.v-app[id*="overlays"] {
		height: 0;
	}
	
	
	.login-bg {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		
		background: transparent;
		
		/* TODO mixin */
		/* background: -moz-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c4d4e), color-stop(100%,#303131));
		background: -webkit-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
		background: -o-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
		background: -ms-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%); */
	/* 	background: radial-gradient(ellipse at center, #4c4d4e 0%,#303131 100%); */
	
		opacity: 0;
		
		/* TODO mixin */
		-webkit-transition: opacity 300ms linear;
		-moz-transition: opacity 300ms linear;
		transition: opacity 300ms linear;
		
		@include fade-in;
	}
	
	.main-view,
	.login-layout {
		position: relative;
		z-index: 2;
	}
	
	div.login-panel {
		@include move-up-100;
	}
	
	.login-panel {
		background: #fff;
		@include border-radius(4px);
		@include box-shadow(0 4px 20px rgba(0,0,0,.5));
		padding: 1em 1em 2em;
	}
	
	.login-panel .labels,
	.login-panel .fields {
		display: block;
	}
	
	.login-panel .v-textfield {
		width: 210px;
	}
	
	.login-panel .h2 {
		padding: 0;
		font-size: 20px;
		color: #c4cacf;
		letter-spacing: -0.05em;
	}
	
	.login-panel .error {
		font-size: 13px;
		height: 20px;
		padding-left: 14px;
	}
	
	
	.v-animate-reveal {
		@include reveal;
	}
	
	.v-animate-hide {
		@include hide;
	}
	
	
	.login .login-bg {
		opacity: 1;
	}
	
	
	.sidebar {
		//background: #414243 url(img/sidebar-gradient.png) repeat-y top right;
		@include move-right;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	.sidebar .branding {
		border-bottom: 1px solid #353637;
		position: relative;
		-webkit-font-smoothing: antialiased;
	}
	
	.sidebar .branding .v-label {
		position: relative;
		z-index: 2;
		
		white-space: normal;
		font-size: 20px;
		line-height: 1.1;
		color: #fff;
		text-shadow: 0 2px 2px rgba(0,0,0,.5);
		
		/* WTH? Why is inline-block forced as an inline style? */
		display: block !important;
		padding: .8em .8em 1.2em;
		
		//@include box-shadow(inset 0 0 5px 2px rgba(0,0,0,.5));
	}
	
	.sidebar .branding .v-label span {
		font-size: 20px;
		color: #FFFFFF;
		display: block;
                font-weight: bold;
	}
	
	.sidebar .branding .v-image {
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.sidebar .menu {
		overflow: auto;
		//height: 100%;
	}
	
	.sidebar .menu .v-ddwrapper {
		padding: 2px;
	}
	
	.sidebar .menu .v-ddwrapper .v-nativebutton {
		margin: -2px -2px;
	}
	
	.sidebar .menu .v-ddwrapper-over {
		padding: 0;
		border: 2px solid #2d90f3;
		background: transparent;
		@include border-radius(4px);
	}
	
	.sidebar .menu .v-nativebutton {
		/* TODO mixin */
		-webkit-appearance: none;
		
		display: block;
		padding: 10px 14px 10px;
		width: 100%;
		border: none;
		margin: 0;
		position: relative;
		
		border-top: 1px solid #4b4c4d;
		border-top-color: rgba(255,255,255,.05);
		
		border-bottom: 1px solid #353637;
		border-bottom-color: rgba(0,0,0,.18);
		
		background: transparent;
		background-color: #3B5998 !important;
                color: #ffffff;
                //background-color: #CFD754 !important;
                
		/* color: #888a8c; */
		font-weight: normal;
		text-shadow: 0 1px 0 rgba(0,0,0,.5);
		text-align: center;
		
		/* TODO mixin */
		/* 		-webkit-transition: color ease-in-out 100ms, background-color linear 60ms; */
		/* 		-moz-transition: color ease-in-out 100ms, background-color linear 60ms; */
		/* 		transition: color ease-in-out 100ms, background-color linear 60ms; */
	}
	
	.sidebar .menu:after {
		content: "" !important;
		display: block !important;
		border-top: 1px solid #4b4c4d;
		border-top-color: rgba(255,255,255,.05);
		height: 0;
	}
        
/*        .v-align-bottom:before {
		//content: "" !important;
		//display: block !important;
                height: 100%;
                vertical-align: middle;
                width: 0;
	}*/
	
	.sidebar .menu .v-nativebutton-caption {
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		display: block;
		margin: .2em 0 0 0;
	}
	
	.sidebar .menu .v-nativebutton:focus {
		outline: none;
	}
	
	.sidebar .menu .v-nativebutton:hover,
	.sidebar .menu .v-nativebutton:focus {
		color: black;
                //background-color: #F16E50 !important;
                background-color: #F2F2F2 !important;
	}
	
	.sidebar .menu .v-nativebutton:before {
		font-size: 24px;
		line-height: 1;
		margin: 0;
	}
	
	.v-webkit & .menu .v-nativebutton:before {
		/* TODO mixin */
/*		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#d3d3d3));
		background: -webkit-linear-gradient(top, #fff 0%,#777 100%);*/
	/* 	background: linear-gradient(to bottom, #e8e8e8 0%,#d3d3d3 100%); */
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		text-shadow: 0 1px 1px rgba(0,0,0,.2);
		opacity: .5;
		
		/* TODO mixin */
		-webkit-transition: opacity ease-in-out 200ms;
		-moz-transition: opacity ease-in-out 200ms;
		-ms-transition: opacity ease-in-out 200ms;
		-o-transition: opacity ease-in-out 200ms;
		transition: opacity ease-in-out 200ms;
                //background-color: #CFD754 !important;
                background-color: #3B5998 !important;
                color: #ffffff;
	}
	
	.v-webkit & .menu .v-nativebutton:hover:before,
	.v-webkit & .menu .v-nativebutton:focus:before {
		opacity: 1;
	}
	
	.sidebar .menu .v-nativebutton:active {
		background: rgba(0,0,0,.1);
	}
	
	.sidebar .menu .v-nativebutton.selected {
		color: black;
		text-shadow: 0 2px 2px rgba(0,0,0,.5);
		font-weight: bold !important;
		/* border-top-color: #F16E50;
		border-bottom-color: #F16E50;
		background: #F16E50;		
		
		background: -moz-linear-gradient(top, #F16E50 0%, #F16E50 10%, #F16E50 90%, #F16E50 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F16E50), color-stop(10%,#F16E50), color-stop(90%,#F16E50), color-stop(100%,#F16E50));
		background: -webkit-linear-gradient(top, #F16E50 0%,#F16E50 10%,#F16E50 90%,#F16E50 100%);
		background: -o-linear-gradient(top, #F16E50 0%,#F16E50 10%,#F16E50 90%,#F16E50 100%);
		background: -ms-linear-gradient(top, #F16E50 0%,#F16E50 10%,#F16E50 90%,#F16E50 100%); */
	/* 	background: linear-gradient(to bottom, #F16E50 0%,#F16E50 10%,#F16E50 90%,#F16E50 100%); */
        
        	border-top-color: #F2F2F2;
		border-bottom-color: #F2F2F2;
		background: #F2F2F2;		
		/* TODO mixin */
		background: -moz-linear-gradient(top, #F2F2F2 0%, #F2F2F2 10%, #F2F2F2 90%, #F2F2F2 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F2F2F2), color-stop(10%,#F2F2F2), color-stop(90%,#F2F2F2), color-stop(100%,#F2F2F2));
		background: -webkit-linear-gradient(top, #F2F2F2 0%,#F2F2F2 10%,#F2F2F2 90%,#F2F2F2 100%);
		background: -o-linear-gradient(top, #F2F2F2 0%,#F2F2F2 10%,#F2F2F2 90%,#F2F2F2 100%);
		background: -ms-linear-gradient(top, #F2F2F2 0%,#F2F2F2 10%,#F2F2F2 90%,#F2F2F2 100%);
	/* 	background: linear-gradient(to bottom, #F2F2F2 0%,#F2F2F2 10%,#F2F2F2 90%,#F2F2F2 100%); */
	
		-webkit-transition: none;
	}
	
	.v-webkit & .menu .v-nativebutton.selected:before {
		text-shadow: none;
		opacity: 1;
	}
	
	.badge,
	.notifications .v-button-caption {
		display: inline-block;
		font-size: 11px;
		line-height: 1;
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,.3);
		padding: .1em .4em .2em;
		
		background: #f16433;
		
		/* TODO mixin */
		background: -moz-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa290), color-stop(14%,#f77b62), color-stop(87%,#ec3120), color-stop(100%,#ce2314));
		background: -webkit-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		background: -o-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		background: -ms-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
		/* Sass compiler chokes on this */
		/* background: linear-gradient(to bottom, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%); */
		
		@include border-radius(2px);
		
		@include box-shadow(0 1px 1px rgba(0,0,0,.3));
	}
	
	.menu .v-nativebutton .badge {
		position: absolute;
		top: 6px;
		right: 8px;
	}
	
	
	
	
	.sidebar .user {
		display: block;
		
		border-top: 1px solid #303132;
		background: #3b3c3d;
		background-color: rgba(0,0,0,.1);
		
		color: #898c8e;
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		
		@include box-shadow(inset 0 1px 0 rgba(255,255,255,.08));
	}
	
	.sidebar .user > .v-slot {
		display: inline-block;
		width: 50%;
	}
	
	.sidebar .user > .v-slot:first-child {
		width: 34px;
	}
	
	.sidebar .user .v-image {
		width: 34px;
		height: 34px;
		border-right: 1px solid #313132;
	}
	
	.sidebar .user .v-label {
		white-space: normal;
		font-size: 12px;
		line-height: 14px;
		font-weight: 600;
		max-width: 50px;
		overflow: visible;
		padding: 2px 8px;
		height: 34px;
		color: inherit;
		-webkit-font-smoothing: antialiased;
	}
	
	.sidebar .user .v-nativebutton,
	.sidebar .user .v-menubar {
		/* TODO mixin */
		-webkit-appearance: none;
		
		border: none;
		border-top: 1px solid #303132;
		background: transparent;
		width: 100%;
		padding: 0;
		
		color: inherit;
	}
	
	.sidebar .user .v-nativebutton:focus {
		outline: none;
	}
	
	.sidebar .user .v-nativebutton:hover,
	.sidebar .user .v-menubar-menuitem:hover {
		color: #e1e1e1;
	}
	
	.sidebar .user .v-nativebutton-caption {
		display: none;
	}
	
	.sidebar .user .v-nativebutton:before,
	.sidebar .user .v-menubar-menuitem:before {
		font-size: 16px;
		margin: 0;
		display: block;
		border-top: 1px solid #434445;
		padding: .3em 0 .4em;
	}
	
	.sidebar .user .v-menubar-menuitem {
		border-right: 1px solid #434445;
		display: block !important;
		cursor: pointer;
	}
	
	.sidebar .user .icon-cancel {
		border-left: 1px solid #303132;
	}
	
	
	.layout-panel {
		background: #fff;
		@include border-radius(4px);
		/* TODO make this work in the Sass compiler */
		/* 	@include box-shadow(0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07)); */
		-webkit-box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
		-moz-box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
		box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
	}
	
	.v-ie8 & .layout-panel {
		border: 1px solid #d8d9d9;
	}
	
	
	.main-view {
		@include fade-in;
	}
	
	.view-content {
		overflow: visible;
	}
	
	.main-view {
		background: #fff;
	}
	
	
	
	
	.help-overlay {
		@include border-radius(2px);
		@include box-shadow(0 3px 10px rgba(0,0,0,.5));
		padding: 15px 20px;
		background: #464646;
		background-color: rgba(40,40,40,.85);
		text-shadow: 0 1px 1px rgba(0,0,0,.5);
		color: #a6a9aa;
		font: $font;
		font-size: 12px;
		
		@include fade-in;
		
		opacity: 0;
		@include animation-duration(1500ms);
		@include animation-delay(2000ms);
		@include animation-fill-mode(forwards);
	
		max-width: 50em;

		.v-window-outerheader {
			padding: 0;
			color: #fff;
			font-size: 14px;
			line-height: 1;
		}
	
		.v-window-header {
			font-weight: normal;
			overflow: visible;
		}
	
		.v-window-footer {
			height: 0;
		}
	
		.v-window-closebox {
			
		}
	
		.v-label p {
			margin: 7px 0 0 0;
		}
	
		a {
			color: #a6a9aa;
			text-decoration: underline;
		}
		
	}
	
	
	
	.help-overlay.login {
		top: auto !important;
		bottom: 20px;
	}
	
	
	
	.dashboard-view .v-horizontallayout {
		padding: 0 20px 20px;
	}
	
	.dashboard-view .v-spacing {
		width: 20px;
		height: 20px;
	}
	
	.dashboard-view .toolbar .v-spacing {
		width: 10px;
	}
	
	
	.dashboard-view .v-csslayout {
		padding: 50px 20px 0;
		overflow: auto;
		position: relative;
	}
	
	.dashboard-view .v-caption {
		font-weight: 600;
		font-size: 13px;
		color: #349aff;
		text-transform: uppercase;
		padding: 0 20px;
		line-height: 38px;
		border-bottom: 1px solid #eee;
		
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	
	.dashboard-view .configure {
		position: absolute;
		z-index: 1;
		top: 9px;
		right: 5px;
	}
	
	.dashboard-view .notes {
		padding: 40px 0 0;
	}
	
	.dashboard-view .notes .v-caption {
		color: #fff;
		text-shadow: 0 1px 1px #000;
		background: #5d6167;
		background: -moz-linear-gradient(top, #5d6167 0%, #393939 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d6167), color-stop(100%,#393939));
		background: -webkit-linear-gradient(top, #5d6167 0%,#393939 100%);
		background: -o-linear-gradient(top, #5d6167 0%,#393939 100%);
		background: -ms-linear-gradient(top, #5d6167 0%,#393939 100%);
		/* background: linear-gradient(to bottom, #5d6167 0%,#393939 100%); */
	}
	
	.dashboard-view .notes .v-textarea {
		border: none;
		padding: 20px 20px 0;
		line-height: 20px;
		background: #fffdf2 url(img/notes-bg.png) repeat;
		color: #545145;
	}
	
	.dashboard-view .notes .v-textarea:focus {
		outline: none;
	}
	
	.dashboard-view .notes .configure {
		color: #ddd;
		text-shadow: 0 1px 1px #000;
	}
	
	.dashboard-view .toolbar {
		padding: 20px;
		text-shadow: 0 1px 1px rgba(255,255,255,.5);
		background: transparent;
	}
	
	.dashboard-view .toolbar .v-button {
		position: relative;
		font-size: 16px;
	}
	
	.dashboard-view .toolbar .notifications.unread .v-button-caption {
		display: block;
		position: absolute;
		top: 2px;
		right: 3px;
	}
	
	.dashboard-view .h1 {
		padding-right: 1em;
	}
	
	.dashboard-view {
		background: #dfe0e1;
		
		/* TODO mixin */
		background: -moz-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d9da), color-stop(10%,#e6e7e8), color-stop(100%,#e0e1e2));
		background: -webkit-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
		background: -o-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
		background: -ms-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
	/* 	background: linear-gradient(to bottom, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%); */
	}
	
	.notifications.v-window {
		margin-top: 45px !important;
		margin-left: -193px !important;
		font-size: 13px;
	}
	
	.notifications.v-window .v-widget {
		font-size: 13px;
	}
	
	.notifications.v-window::before {
		content: "";
		position: absolute;
		top: -14px;
		right: 80px;
		border: 7px solid #fff;
		width: 0;
		height: 0;
		border-top-color: transparent;
		border-left-color: transparent;
		border-right-color: transparent;
		margin-left: -7px;
	}
	
	.notifications.v-window .v-window-outerheader {
		font-size: 16px;
		color: #f16433;
		line-height: 25px;
		padding-left: 14px;
	}
	
	.notifications.v-window .v-label span {
		font-size: 12px;
		color: #979699;
	}
	
	.notifications.v-window .v-label hr {
		height: 0;
		border: none;
		border-top: 1px solid #ddd;
		margin: 0 -12px 12px;
	}
	
	.v-formlayout-captioncell {
		vertical-align: top;
	}
	
	.edit-dashboard .v-formlayout {
		padding: 10px 8px;
		
		.v-formlayout-captioncell {
			vertical-align: middle;
		}
	}


.v-table-cell-content-blueTextColorStyle {
    color: #c99ab1 !important; 
    background-color: #ffffff !important;
    font-size: 7px !important;
}



.v-table-cell-wrapper{
    font-size: 12px !important;
  /*   background-color: #ffffff !important;
    background: transparent;
    border: none;
border-bottom: 1px solid #d4d5d5;
border-top: 1px solid #d4d5d5; */
}

.YellowBackground
{
/* background-color: #c99ab1 !important; */
background-color: lightpink !important;
}

.fourSideBorder
{
    border: 0.5px solid #777;
}

.bottomBorder
{
    border-bottom: 0.5px solid #777;
}

.topBorder
{
    border-top: 0.5px solid #777;
}

.whiteBottomBorder
{
    border-bottom: 0.5px solid #ffffff;
}
.leachBottomBorder
{
    border-bottom: 0.5px solid #E9E7E0;
}

.backgroundColor
{
background-color: #eeeeee !important;
}

.backgroundColorForDictLabels
{
background-color: #a2a2a2 !important;
}

.brownBackgroundColor
{
background-color: brown !important;
color: #ffffff !important; 
font-size: 20px !important;
}

.threeSideBorder
{
    border-bottom: 0.5px solid #777;
    border-top: 0.5px solid #777;
    border-right: 0.5px solid #777;
}
.rightBorder
{
    border-right: 0.5px solid #777;
}
.rightAndLeftBorder
{
    border-right: 0.5px solid #ffffff;
    border-left: 0.5px solid #ffffff;
}

.deepPinkColor
{

color: #3b5998 !important; 
}

.deepPinkColorBold
{

color: #3b5998 !important; 
font-weight: bold !important;
}

.lightBackgroundForDashboardActivity
{
background-color: #eeeeee !important;
}

.lightGrayFourSideBorder
{
    border: 0.5px solid #eeeeee;
}

.blueColor
{
color: blue !important; 
}
.lightGrayColorAndSmallFont
{

color: gray !important; 
font-size: 11px !important;
}


.blueBackgroundWhiteColor
{
background-color: #499bea !important;
color: #ffffff !important; 
}

.greyBackgroundWhiteColor
{
background-color: grey !important;
color: #ffffff !important; 
font-size: 24px !important;
}

.lightgreyBackgroundBlackColor
{
background-color: lightgrey !important;
color: black !important; 
}

.login-product-label
{
font-size: 18px !important;
text-align:center !important;
color:#3399FF;
}

.sign-in-tocontinue
{

font-size: 18px !important;
text-align:center !important;
}

.blackBg
{
background-color: black !important;
}
.whiteBg
{
background-color: white !important;
}

.orangeBg
{
background-color: orange !important;
}

.sweetOrangeBg
{
background-color: #F16E50 !important;
}

.leachBg
{
background-color: #E9EAED !important;
}

.selectedMenuBanner
{
    background-color: #E9E7E0 !important;
    font-size: 20px;
    font-weight: 600;    
}

.formatText
{
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 16px;
    line-height: 175%;
}

.fourSideWhiteBorder
{
    border-top: 0.5px solid #ffffff;
    border-left: 0.5px solid #ffffff;
    border-right: 0.5px solid #ffffff;
    border-bottom: 0.5px solid #ffffff;        
}

.img-circular{
 width: 150px;
 height: 150px;
 background: #414243 url(img/about.jpeg);
 background-size: cover;
 display: inline-block;
 border-radius: 100px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
    vertical-align: middle;
}

/* .img-circular{
 width: 150px;
 height: 150px;
 background: #414243 url(img/about.jpeg);
 background-size: cover;
 display: inline-block;
 border-top-left-radius: 100px;
 -webkit-border-top-left-radius: 100px;
 -moz-border-top-left-radius: 100px;
 border-bottom-right-radius: 100px;
 -webkit-border-bottom-right-radius: 100px;
 -moz-border-bottom-right-radius: 100px;
} */


.profile_style_picture_bg
{
    //background: transparent url(img/maria_stylish_tennis.jpg) no-repeat;
    background-size: 100%;    
    //background-color : #E9EAED;
    background-color : white;
    //overflow:scroll;
    //overflow:auto;
    height: auto;
}

.mainVerticalStyle
{
    margin-left:14%;
    margin-right:14%;
    //margin-top:15%;
    width:72%;
    background-color : transparent;
    //height:600px;
    //position: relative;
}
.transparentBg
{
    background-color : transparent;
}
.floatingStyle
{
    float: right;
    float: left;
}

.saffronBg
{
    //background-color : #CFD754;
    background-color : #3B5998;
    
}
.promoImageBg
{
/*    width:100%;
    height:100%;*/
    //background: transparent url(img/promo-image.jpg);
    height: auto;
}



////////////////////////////////////////////////////////////////////////////////////
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
    src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg');
}



* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(http://subtlepatterns.com/patterns/dark_wall.png);
    background-repeat: repeat;
    height: 500px;
    padding: 1px;
}

h1 { color: white }

#slideshow-wrap {
    display: block;
    height: 320px;
    min-width: 260px;
    max-width: 640px;
    margin: auto;
    border: 12px rgba(255,255,240,1) solid;
    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    box-shadow: 0px 0px 5px rgba(0,0,0,.8);
    margin-top: 20px;
    position: relative;
}

#slideshow-inner {
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0);
    overflow: hidden;
    position: relative;
}

#slideshow-inner>ul {
    list-style: none;
    height: 100%;
    width: 500%;
    overflow: hidden;
    position: relative;
    left: 0px;
    -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
    transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {
    width: 20%;
    height: 320px;
    float: left;
    position: relative;
}

#slideshow-inner>ul>li>img {
    margin: auto;
    height: 100%;
}

#slideshow-wrap input[type=radio] {
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 100;
    visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {
    position: absolute;
    left: 50%;
    bottom: -45px;
    z-index: 100;
    width: 12px;
    height: 12px;
    background-color: rgba(200,200,200,1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active { bottom: -46px }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

label.arrows {
    font-family: 'WebSymbolsRegular';
    font-size: 25px;
    color: rgb(255,255,240);
    position: absolute;
    top: 50%;
    margin-top: -25px;
    display: none;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1000;
    background-color: transparent;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }

input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5 {
    right: -55px;
    display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4 {
    left: -55px;
    display: block;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

.description {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    font-family: 'Yanone Kaffeesatz';
    z-index: 1000;
}

.description input { visibility: hidden }

.description label {
    font-family: 'WebSymbolsRegular';
    background-color: rgba(255,255,240,1);
    position: relative;
    left: -17px;
    top: 00px;
    width: 40px;
    height: 27px;
    display: inline-block;
    text-align: center;
    padding-top: 7px;
    border-bottom-right-radius: 15px;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    z-index: 5;
    color: rgb(20,20,20);
}

#slideshow-inner>ul>li:hover .description label { opacity: 1 }

.description input[type=checkbox]:checked~label { opacity: 1 }

.description .description-text {
    background-color: rgba(255,255,230,.5);
    padding-left: 45px;
    padding-top: 25px;
    padding-right: 15px;
    padding-bottom: 15px;
    position: relative;
    top: -35px;
    z-index: 4;
    opacity: 0;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -o-transition: opacity .2s;
    transition: opacity .2s;
    color: rgb(20,20,20);
}

.description input[type=checkbox]:checked~.description-text { opacity: 1 }
}
